<script lang="ts">
import { defineComponent } from "vue";
import teacherSearch from "./hooks/teacherSearch";
import teacherForm from "./hooks/teacherForm";
// 图片剪辑上传组件
import ImgCutter from "@components/ImgCutter.vue";
import { fileServiceUrl } from "@config";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "TeacherList",
  components: {
    ImgCutter,
  },
  setup() {
    // 默认加载数据
    teacherSearch().getTeacherDataList();
    return {
      // 这里将代码全部分离到ts模块中
      ...teacherSearch(),
      ...teacherForm(),
      fileServiceUrl,
    };
  },
  computed: {
    headPicUrl() {
      let avatar = teacherForm().teacherForm.value.avatar ?? "";
      console.log("头像"+avatar);
      
      if (avatar.startsWith("http")) {
        return avatar;
      } else {
        if (avatar == null || avatar === "") {
          //ElMessage.warning(teacherForm().teacherForm.value.name + "头像信息加载失败！")
          return fileServiceUrl + avatar + "null.null";
        }
        return fileServiceUrl + avatar;
      }
    },
  },

});
</script>

<template>
  <div class="role-container">
    <div class="search-box">
      <el-form ref="searchFormRef" :model="searchForm" label-suffix=":" inline>
        <el-form-item label="讲师名字" prop="name">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="讲师头衔" prop="level">
          <el-select v-model="searchForm.level" @change="handleSearch">
            <el-option :value="null" label="全部" />
            <el-option :value="1" label="高级讲师" />
            <el-option :value="2" label="首席讲师" />
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间" prop="createTimeRange">
          <el-date-picker
            v-model="searchForm.createTimeRange"
            type="daterange"
            format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-wrapper">
      <el-form-item>
        <el-button @click="addTeacher">新建</el-button>
      </el-form-item>
    </div>
    <div class="table-wrapper">
      <!-- 新增/修改 对话框 -->
      <el-dialog
        v-model="visible"
        width="600px"
        title="新增/修改"
        destroy-on-close
        :close-on-click-modal="false"
        @close="resetTeacherForm"
      >
        <el-form
          ref="teacherFormRef"
          :model="teacherForm"
          :rules="rules"
          label-suffix=""
          label-width="100px"
        >
          <!-- rules 配合 prop 实现数据校验 -->
          <el-form-item label="讲师名称" prop="name">
            <el-input v-model="teacherForm.name"></el-input>
          </el-form-item>
          <el-form-item label="讲师头衔" prop="level">
            <el-select
              v-model="teacherForm.level"
              clearable
              placeholder="请选择"
            >
              <!-- 
    数据类型要与JSON中类型一致，否则无法回填 
    因此，这里value使用却在绑定的值，保证其数据类型是number
                -->
              <el-option :value="1" label="高级讲师" />
              <el-option :value="2" label="首席讲师" />
            </el-select>
          </el-form-item>
          <el-form-item label="讲师资历" prop="career">
            <el-input v-model="teacherForm.career"></el-input>
          </el-form-item>
          <el-form-item label="讲师简介" prop="intro">
            <el-input
              v-model="teacherForm.intro"
              :rows="5"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师头像">
            <img-cutter
              :cut-width="70"
              :cut-height="70"
              :size-change="true"
              @cutDown="cutDown"
            >
              <template #open>
                <el-avatar :size="40" :src="headPicUrl" />
              </template>
            </img-cutter>
          </el-form-item>

          <el-form-item label="讲师排序" prop="sort">
            <el-input v-model="teacherForm.sort"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="visible = false">取消</el-button>
        </template>
      </el-dialog>
      <el-table
          style="font-size:14px"
        v-loading="tableLoading"
        :data="tableData"
        size="small"
        border
        stripe
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          align="center"
        ></el-table-column>

        <el-table-column label="头像" prop="avatar" align="center">
          <template #default="scope">
            
             <el-avatar shape="square"  :size="40" :src="scope.row.avatar!= null && scope.row.avatar!= '' && scope.row.avatar.startsWith('http') ? scope.row.avatar:fileServiceUrl+scope.row.avatar" />
          </template>
         
        </el-table-column>
        <el-table-column label="头衔" prop="level" align="center">
          <!-- 插槽 -->
          <template #default="scope">{{
            scope.row.level === 1 ? "高级讲师" : "首席讲师"
          }}</template>
        </el-table-column>
        <el-table-column
          label="资历"
          prop="career"
          align="center"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          prop="gmtCreate"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          prop="sort"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
          
          <el-button type="warning" plain @click="editTeacher(row.id)">修改</el-button>
          <el-button type="warning" plain @click="delTeacher(row.id)">删除</el-button>
        
        
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-wrapper">
      <el-pagination
        v-model:currentPage="searchForm.page"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind:total="total"
        @current-change="handleCurrentPageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
  </div>
</template>

 



<style lang="scss" scoped>
.role-container {
  padding: 5px;
}
</style>